<template>
	<div style="width: 100%;text-align: center">
		<div style="margin-left:10px;margin-top:10px;margin-bottom: 10px;font-size: 14px;text-align: left;">字段对应</div>
		<el-select v-model="selectFormTemp.parentField" style="display: inline-block;width: 110px">
			<el-option
				v-for="item in formFieldList"
				:key="item.id"
				:label="item.label"
				:value="`${item.id},${item.label}`">
			</el-option>
		</el-select>
		<el-select v-model="selectFormTemp.childField" style="display: inline-block;width: 110px">
			<el-option
				v-for="item in childFormFieldList"
				:key="item.id"
				:label="item.label"
				:value="`${item.id},${item.label}`">
			</el-option>
		</el-select>
		<el-button type="primary" @click="addFieldMap" style="display: inline-block">添加</el-button>
		<div style="margin-top:10px;margin-bottom: 10px">
			<el-form-item label="对应关系">
			<div v-for="(item,index) in this.formDataMapping" :key="index" style="display: inline-block;margin: 5px;">
				<el-tag style="margin-right: 10px;">{{ item.parentField.title }}->{{ item.childField.title }}
					<el-icon color="#409EFF">
						<el-icon-close @click="removeUser(item.accountId)"/>
					</el-icon>
				</el-tag>
			</div>
			</el-form-item>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		dataMapping:Object,
		formFieldList: Object,
		childFlowId: String
	},
	data() {
		return {
			childFormFieldList: [],
			selectFormTemp: {
				parentField: '',
				childField: '',
			},
			formDataMapping: []
		}
	},
	watch: {
		'childFlowId': {
			handler(val) {
				if (val) {
					this.getChildBpmFieldList(this.childFlowId)
				}
			}
		},
		dataMapping(){
			this.formDataMapping = this.dataMapping
		}
	},
	mounted() {
		this.getChildBpmFieldList(this.childFlowId)
	},
	methods: {
		addFieldMap() {
			let selectForm = {
				parentField: {
					field: this.selectFormTemp.parentField.split(",")[0],
					title: this.selectFormTemp.parentField.split(",")[1],
				},
				childField: {
					field: this.selectFormTemp.childField.split(",")[0],
					title: this.selectFormTemp.childField.split(",")[1],
				}
			};
			this.formDataMapping.push(selectForm);
			this.$emit('update:formFieldList', this.formDataMapping)
		},
		async getChildBpmFieldList(childFlowId) {
			var res = await this.$API.bpm.bpmForm.getBpmFormFieldsListForSelect.get({flowId: childFlowId});
			if (res.code == 200) {
				if (res.data == undefined) {
					this.$alert("未能检测到表单字段", "提示", {type: 'error'})
				} else {
					this.childFormFieldList = res.data;
				}
			}
		},
		removeUser(index) {
			this.formDataMapping.splice(index, 1);
		},
	}
}
</script>
